<template lang="pug">
  el-dialog(
    :visible="visibleDialog"
    :title="title"
    width="1240px"
    append-to-body
    destroy-on-close
    v-el-drag-dialog
    @close="$_handleCancel"
  )
    s-table(
      ref="table1"
      reqUrl="api/developReview/childrenDetailsList"
      req-method="POST"
      :column="tableObj.column"
      :queryPropsParams="queryPropsParams"
    )
      template(slot="created" slot-scope="text, scope")
        span {{text | dateFilter('YYYY/MM/DD')}}
      template(slot="action" slot-scope="text, scope, index")
        el-link(@click="infoRoute(scope)" type="success") 查看

    el-dialog(
      :visible="visibleDetail"
      title="详情"
      width="1240px"
      append-to-body
      destroy-on-close
      :append-to-body="true"
      @close="visibleDetail = false"
    )
      .content(v-loading="loading")
        el-card.pr.detail.commonCard(shadow="never")
          h2 姓名：{{title}}
          p
            span 月龄:{{info.childrenMonth}}
          p 评测时间：{{info.created | dateFilter}}
          .extra
            el-button.gradientVertical(type="success" size="small" @click="exportHandle") 导出
        el-card.commonCard(shadow="never")
          h2(slot="header") 简述
          p {{remarks}}
        el-card.detail.commonCard(shadow="never")
          h2(slot="header") 检表
          div(class="test")
            div.tishi 评量检核标示：
              div
                span 已达到
                img(src="@/assets/ydd.png")
              div
                span  发展中，仍需持续引导
                img(src="@/assets/cxyd.png")
              div
                span 尚未达成
                img(src="@/assets/swdd.png")
          el-table(
            style="margin-top: 10px"
            :data="developList"
            :span-method="objectSpanMethod"
            border
          )
            el-table-column(prop="name" label="项目" width="120px")
            el-table-column(label="检核" width="160px")
              template(slot-scope="scope")
                div(v-if="scope.row.states === 1" style="font-size: 20px")
                  img(src="@/assets/ydd.png")
                div(v-if="scope.row.states === 2" style="font-size: 20px")
                  img(src="@/assets/cxyd.png")
                div(v-if="scope.row.states === 0" style="font-size: 30px")
                  img(src="@/assets/swdd.png")
            el-table-column(prop="target" label="评量指标" width="240px")
            el-table-column(prop="details" label="说明")
</template>
<script>
const column = [
  {
    prop: 'created',
    label: '评测日期'
  },
  {
    prop: 'month',
    label: '里程月龄'
  },
  {
    prop: 'childrenMonth',
    label: '测评月龄'
  },
  {
    prop: 'createdBy',
    label: '评测人'
  },
  {
    prop: 'action',
    label: '操作'
  }
]
import { getChildrenDetails, exportChildrenDetails } from '../api'
import elDragDialog from '@/directive/el-drag-dialog'

export default {
  directives: { elDragDialog },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    id: {
      type: [Number, String],
      default: ''
    }
  },
  data () {
    return {
      tableObj: {
        column
      },
      info: {},
      remarks: '',
      developList: [],
      loading: false,
      visibleDetail: false
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    },
    queryPropsParams () {
      return {
        childrenId: this.id
      }
    }
  },
  watch: {
    visible (val) {
      console.log(val)
      console.log(this.id)
      console.log(this.title)
      if (val) {
        this.refreshTable()
      }
    }
  },
  methods: {
    refreshTable (flag = false) {
      this.$refs.table1.reload()
    },
    // 详情跳转
    infoRoute (res) {
      this.info = res
      this.visibleDetail = true
      this.getDetail(res.developUserId)
    },
    $_handleCancel () {
      this.visibleDialog = false
    },

    getDetail (developUserId) {
      this.loading = true
      getChildrenDetails({ developUserId }).then(res => {
        console.log(res)
        this.remarks = res.remarks
        this.developList = res.list
      }).finally(() => {
        this.loading = false
      })
    },

    exportHandle () {
      exportChildrenDetails({ developUserId: this.info.developUserId }).then(data => {
        top.location.href = data
      })
    },

    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      const spanArr = this.getSpanArr(this.developList, 'name')
      const _row = spanArr[rowIndex]
      if (columnIndex === 0) {
        if (_row > 0) {
          return {
            rowspan: _row,
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },

    getSpanArr (data, spanKey) {
      const spanArr = []
      let pos = ''
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          spanArr.push(1)
          pos = 0
        } else {
          if (data[i][spanKey] === data[i - 1][spanKey]) {
            spanArr[pos] += 1
            spanArr.push(0)
          } else {
            spanArr.push(1)
            pos = i
          }
        }
      }
      return spanArr
    }
  }
}
</script>
<style lang="scss" scoped>
.detail {
  h2 {
    margin-bottom: 12px;
  }

  .tishi {
    display: flex;
    align-items: center;

    div {
      display: flex;
      flex-direction: row;
      margin-right: 40px;
      img{
        margin-left: 16px;
      }
    }

    margin-top: 5px;

    >span {
      margin-right: 20px
    }
  }

  .extra {
    position: absolute;
    right: 16px;
    top: 16px
  }
}
</style>
